<template>
	<view>
		<video 
			id="video" 
			class="video" 
			:src="val.src" 
			:show-fullscreen-btn="false"
			:show-center-play-btn="true"
			@play="play" 
			@ended="ended"
			@fullscreenchange="fullscreenchange">
		</video>
	</view>
</template>

<script>
	export default{
		props:{
			val: Object
		},
		data(){
			return{
				videoContext:''
			}
		},
		onReady() {
			this.videoContext = uni.createVideoContext("video", this)
		},
		methods:{
			play(){
				this.videoContext.requestFullScreen()
				this.$emit('playVideo')
			},
			ended(){
				this.videoContext.exitFullScreen()
				this.$emit('endVideo')
			},
			//退出全屏时暂停视频内容
			fullscreenchange(e){
				if(!e.detail.fullScreen){
					this.videoContext.pause()
					this.$emit('endVideo')
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.video{
		width: 250rpx;
		height: 220rpx;
	}
</style>
